<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <text class="title">购物车</text>
    </view>
    <!-- 商品列表 -->
    <view class="product-list">
      <!-- 商品项 -->
      <view class="product-item" v-for="(item, index) in products" :key="index">
        <view class="product-info">
          <image class="product-image" :src="item.image" mode="aspectFit"></image>
          <view class="product-details">
            <text class="product-name">{{ item.name }}</text>
            <text class="product-price">¥{{ item.price }}</text>
            <view class="quantity-selector">
              <text class="quantity-label">数量:</text>
              <text class="quantity-value">{{ item.quantity }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部结算栏 -->
    <view class="footer">
      <view class="total">
        <text class="total-label">总计:</text>
        <text class="total-price">¥{{ total }}</text>
      </view>
      <button class="checkout-btn">去结算</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          image: 'https://img14.360buyimg.com/n1/s450x450_jfs/t1/188515/12/39048/29606/6625b741Ffd5cb87c/c66e30682049a791.jpg',
          name: '小米Redmi K70 新品5G手机 全网通 红米手机 浅茄',
          price: 2100.00,
          quantity: 1
        },
        {
          image: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/196255/30/53071/138956/674019c0F4513b62d/af9552fdee7233dc.jpg.avif',
          name: '骆驼（CAMEL）【抱抱】冬季户外拒水羽绒服600蓬',
          price: 498.00,
          quantity: 2
        },{
          image: 'https://img13.360buyimg.com/n1/s450x450_jfs/t1/163936/14/45261/91597/66472992F28a9ac89/15b734bac0905b5a.jpg.avif',
          name: 'RK R87Pro三模机械键盘无线2.4G蓝牙有线88键全键无冲家用办公电竞游戏热插拔轴RGB背光雅墨碧螺轴',
          price: 2100.00,
          quantity: 1
        },{
          image: 'https://img11.360buyimg.com/n1/s450x450_jfs/t1/248765/19/25515/108347/67401a14Fb0827262/d90bbe0536c91fd1.jpg.avif',
          name: '骆驼（CAMEL）【小太阳-石墨烯】户外羽绒服男女款加厚保暖面包服A33CAPN163',
          price: 2100.00,
          quantity: 1
        },
        // 可以添加更多商品
      ]
    };
  },
  computed: {
    total() {
      return this.products.reduce((acc, product) => acc + product.price * product.quantity, 0).toFixed(2);
    }
  }
};
</script>

<style>
/* 全局样式 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  background-color: #ff5777;
  padding: 20px;
  text-align: center;
}

.title {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}

.product-list {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.product-item {
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.product-info {
  display: flex;
}

.product-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.product-details {
  flex: 1;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-price {
  color: #ff5777;
  font-size: 14px;
  margin-bottom: 10px;
}

.quantity-selector {
  display: flex;
  align-items: center;
}

.quantity-label {
  font-size: 14px;
  margin-right: 5px;
}

.quantity-value {
  font-size: 14px;
  font-weight: bold;
}

.footer {
  background-color: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ddd;
}

.total {
  display: flex;
  align-items: center;
}

.total-label {
  font-size: 16px;
  margin-right: 5px;
}

.total-price {
  font-size: 18px;
  font-weight: bold;
  color: #ff5777;
}

.checkout-btn {
  background-color: #ff5777;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
}
</style>